<template>
  <!-- 头部 -->
  <view class="head"></view>
  <view class="searchbox" @click="skip('/pages/search/search')">
    <view class="scanthecode">
      <img
        src="http://uniqn.zmycode.top/%E9%A6%96%E9%A1%B5%20(2).png"
        alt=""
        class="img"
      />
    </view>
    <view class="input">
      <view class="input-title">
        <img
          src="http://uniqn.zmycode.top/%E6%90%9C%E7%B4%A2%20(1).png"
          alt=""
          class="img"
        />
        搜索
      </view>
    </view>
  </view>
  <view class="content" :style="{ height: liandong + 'px' }">
    <view class="left">
      <view
        class="leftcontent"
        :class="leftindex == index ? 'active' : 'unactive'"
        @click="leftindex = index"
        v-for="(item, index) in optionslist"
        :key="index"
      >
        {{ item.title }}
        <view class="hoverleft"></view>
      </view>
    </view>
    <view class="right">
      <view
        class="rightcontent"
        v-show="leftindex == index"
        @click="leftindex = index"
        v-for="(item, index) in rightlist"
        :key="index"
      >
        <view v-for="(ele, index) in item.fenlei" :key="index">
          <view class="contenthead">
            <view class="contenthead-left">{{ ele.head }}</view>
            <img
              src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
              alt=""
              class="img"
            />
          </view>
          <view class="contentfor-box">
            <view
              class="contentfor"
              v-for="(iten, index) in ele.list"
              :key="index"
            >
              <img :src="iten.image" alt="" class="img" />
              <view class="contentfor-title font12">{{ iten.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { optionslist, rightlist } from "./sort.js";

import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
//联动左边选项
var leftindex = ref(0);
//屏幕高度
var screenHeight = ref(0);
//head高度
const headheight = ref(0);
//搜索框高度
var sousuoheight = ref(0);
var liandong = ref(0);
const skip = (res) => {
  console.log(res);
  uni.navigateTo({ url: res });
};
onReady(() => {
  //获取屏幕高度
  const query = uni.createSelectorQuery().in(this);
  query
    .select(".head")
    .boundingClientRect((data) => {
      headheight.value = data.height;
    })
    .exec();

  query
    .select(".searchbox")
    .boundingClientRect((data) => {
      sousuoheight.value = data.height;
    })
    .exec();

  // get system screen height
  uni.getSystemInfo({
    success: (result) => {
      screenHeight.value = result.screenHeight;
    },
    fail: (error) => {},
  });

  setTimeout(() => {
    liandong.value =
      screenHeight.value - headheight.value - sousuoheight.value - 50;
  }, 200);
});
</script>

<style lang="scss" scoped>
.head {
  padding-top: var(--status-bar-height);
  background-color: #fff;
}
.searchbox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  .input {
    background-color: #f8f8f8;
    width: calc(100% - 60rpx);
    height: 50rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .input-title {
      color: #999;
      font-size: 30rpx;
      line-height: 60rpx;
      .img {
        width: 30rpx;
        height: 30rpx;
        line-height: 50rpx;
        transform: translateY(20%);
        margin-right: 10rpx;
      }
    }
  }

  .scanthecode {
    margin: 0 30rpx 0 20rpx;

    width: 40rpx;
    .img {
      width: 40rpx;
      height: 40rpx;
      // transform: translateY(20%);
    }
  }
}
.content {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  .left {
    width: 20%;
    min-width: 20%;
    // border: 1px solid red;
    background-color: #f5f5f5;
    height: 100%;

    // height: 100vh;
    .leftcontent {
      text-align: center;
      line-height: 80rpx;
      position: relative;
      // border: 1px solid red;
    }
    .active {
      background-color: #fff;
      color: #f94d73;
      .hoverleft {
        width: 4rpx;
        height: 40rpx;
        background-color: #f94d73;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
    }
  }
  .right {
    width: 80%;
    // border: 1px solid red;
    background-color: #fff;
    .contenthead {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;

      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .contentfor-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      padding: 10rpx;
      .contentfor {
        width: calc(100% / 3 - 10rpx);
        margin: 10rpx 5rpx 10rpx 5rpx;
        .img {
          width: 100%;
          height: 150rpx;
          object-fit: cover;
        }
        .contentfor-title {
          text-align: center;
        }
      }
    }
  }
}
</style>
